---
title: Button
description: Buttons are clickable elements that trigger an action that does not change the current URL.
source: 'sentry/components/core/button'
resources:
  figma: https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/ChonkUI--App-Components--WIP-?node-id=384-2119&t=DdXZ7WIgTdURJlRv-4
  js: https://github.com/getsentry/sentry/blob/481d8d642e9cf549eb46fbaac1d0527395e8b490/static/app/components/core/button/index.tsx#L22
  a11y:
    WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
    WCAG 2.1.1: https://www.w3.org/TR/WCAG22/#keyboard
    WCAG 2.4.7: https://www.w3.org/TR/WCAG22/#focus-visible
    WCAG 2.5.8: https://www.w3.org/TR/WCAG22/#target-size-minimum
    WAI-ARIA Button Practices: https://www.w3.org/WAI/ARIA/apg/patterns/button/
---

import {Alert} from 'sentry/components/core/alert';
import {Button} from 'sentry/components/core/button';
import {
  IconAdd,
  IconArrow,
  IconChevron,
  IconClock,
  IconClose,
  IconDelete,
  IconDocs,
  IconEdit,
  IconEllipsis,
  IconLightning,
  IconLink,
  IconOpen,
  IconStar,
  IconZoom,
} from 'sentry/icons';
import * as Storybook from 'sentry/stories';

import ButtonDocumentation from '!!type-loader!@sentry/scraps/button';

export const documentation = {
  exports: {
    module: ButtonDocumentation.exports?.module,
    exports: {
      // Button has some exports that we don't want to document, strip them out until they are removed
      ...Object.fromEntries(
        Object.entries(ButtonDocumentation?.exports?.exports ?? {}).filter(
          ([key]) => key !== 'StyledButton' && key !== 'ButtonBar'
        )
      ),
    },
  },
  props: {
    ...ButtonDocumentation?.props,
  },
};

To create a basic button, wrap text in a `<Button>` and pass an `onClick` callback.

```jsx
<Button onClick={() => alert('Hello world')}>Click here</Button>
```

## Priorities

Buttons come in a few different styles: `muted` (default), `primary`, `warning`, `danger`, `transparent` and `link`.

<Storybook.Demo>
  <Button priority="default">Default (default)</Button>
  <Button priority="primary">Primary</Button>
  <Button priority="danger">Danger</Button>
  <Button priority="transparent">Transparent</Button>
  <div style={{alignSelf: 'center'}}>
    <Button priority="link">Link</Button>
  </div>
</Storybook.Demo>
```jsx
<Button priority="default">Default (default)</Button>
<Button priority="primary">Primary</Button>
<Button priority="danger">Danger</Button>
<Button priority="transparent">Transparent</Button>
<Button priority="link">Link</Button>
```

## Sizes

Buttons are available in different sizes: `md` (default), `sm`, `xs`, and `zero`.

<Storybook.Demo>
  <Button size="md">Medium (default)</Button>
  <Button size="sm">Small</Button>
  <Button size="xs">Extra small</Button>
  <Button size="zero">Zero</Button>
</Storybook.Demo>
```jsx
<Button size="md">Medium (default)</Button>
<Button size="sm">Small</Button>
<Button size="xs">Extra small</Button>
<Button size="zero">Zero</Button>
```

## Icons

Buttons support an optional leading icon.

<Alert type="info">
  You do not typically need to set the `size` prop for the icon, the Button wraps the
  rendered Icon in a `IcconDefaultsProvider` to provide an icon size proportional to the
  button size.
</Alert>

<Storybook.Demo>
  <Button icon={<IconAdd />} priority="primary">
    Add
  </Button>
</Storybook.Demo>
```jsx
<Button icon={<IconAdd />} priority="primary">
  Add
</Button>
```

We have standardized call to action copy and specific icon pairings. When creating an icon button, please use a pairing from the following list.

| Icon                                       | Name        | Copy                                   | Meaning                                                   |
| ------------------------------------------ | ----------- | -------------------------------------- | --------------------------------------------------------- |
| <IconAdd />                                | `add`       | Create                                 | Spawn something from nothing                              |
| <IconAdd />                                | `add`       | Add                                    | Append another thing in the group                         |
| <IconDelete />                             | `trash`     | Delete                                 | Destroy thing in the group                                |
|                                            |             | Manage                                 | Broader meaning, includes bulk order, add, remove, etc.   |
| <IconEdit />                               | `edit`      | Edit                                   | Modifies fundamental attribute of the thing               |
| <IconOpen />                               | `open`      | Open in `Product`                      | Leaves existing view and goes to another product          |
| <IconClose />                              | `close`     | Close                                  | Potentially reopen this again later                       |
| <IconDocs />                               | `docs`      | Read Docs                              | Similar to “Open In” but always goes to Sentry Docs       |
| <IconEllipsis />                           | `ellipses`  | More `Samples`                         | See more of the same thing                                |
|                                            | Show More   | Accordions down to reveal more content |
| <IconChevron direction="up" />             | `chevron`   | Expand                                 | Content is completely hidden except for title             |
| <IconChevron direction='down' />           | `chevron`   | Collapse                               | Content is completely shown and need to hide except title |
| <IconChevron isDouble direction="left" />  | `chevron`   | Expand                                 | Content is completely hidden (depends on direction)       |
| <IconChevron isDouble direction="right" /> | `chevron`   | Collapse                               | Content is completely shown (depends on direction)        |
|                                            |             | Dismiss                                | Get rid of forever                                        |
| <IconClock />                              | `clock`     | Remind Me Later                        | Get rid of temporarily                                    |
| <IconArrow />                              | `arrow`     | Back                                   | Go to previous screen                                     |
| <IconLightning />                          | `lightning` | Upgrade                                | Upgrade to Business Plan                                  |
|                                            |             | Save `Item`                            | Preserve changes                                          |
| <IconClose />                              | `close`     | Cancel                                 | Exit without saving changes                               |
| <IconLink />                               | `link`      | Share                                  | Copies link to paste anywhere                             |
|                                            |             | Connect                                | Create link between two objects                           |
|                                            |             | Disconnect                             | Break link between two objects                            |
| <IconZoom isZoomIn />                      | `zoom`      | Zoom In                                | Applies to charts and zooms to fit                        |
| <IconZoom />                               | `zoom`      | Zoom Out                               | Applies to charts and zooms out (i.e. 200%)               |
| <IconStar />                               | `star`      | Favorite                               | Hoisting item to primary view                             |

## Disabled and Busy Buttons

Disabled and busy buttons are used to indicate the status of an item. Busy buttons should be used to indicate that an action is in progress. Disabled buttons should be used to indicate that an action is not available.

<Storybook.Demo>
  <Button disabled priority="primary">
    Disabled
  </Button>
  <Button disabled>Disabled</Button>
  <Button busy priority="primary">
    Busy
  </Button>
  <Button busy>Busy</Button>
</Storybook.Demo>
```jsx
<Button disabled priority="primary">
  Disabled
</Button>
<Button disabled>Disabled</Button>
<Button busy priority="primary">
  Busy
</Button>
<Button busy>Busy</Button>
```

## Icon-only Buttons

In scenarios where high information density is critical, buttons may be displayed without text.

> [!WARNING]
> Buttons with icons and no `children` **must** include a `aria-label` for screen readers!

<Storybook.Demo>
  <Button icon={<IconAdd />} aria-label="Add" />
</Storybook.Demo>
```jsx
<Button icon={<IconAdd />} aria-label="Add" />
```

## Accessibility

To meet WCAG 2.2 AA compliance, `<Button>` automatically meets the [WCAG 1.4.3](https://www.w3.org/TR/WCAG22/#contrast-minimum), [WCAG 2.1.1](https://www.w3.org/TR/WCAG22/#keyboard), [WCAG 2.4.7](https://www.w3.org/TR/WCAG22/#focus-visible), [WCAG 2.5.8](https://www.w3.org/TR/WCAG22/#target-size-minimum) success criteria.

Developers should take care to ensure that their implementations additionally follow the [WAI-ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and properly handle focus changes when an action is triggered.
